<template>
  <div class="phang">
    <!-- 官方榜单 -->
    <div class="official">
      <div class="official-top">官方榜</div>
      <div class="con">
        <PhCard :cards="biaoshengData"></PhCard>
      <PhCard :cards="biaoshengData1"></PhCard>
      <PhCard :cards="biaoshengData2"></PhCard>
      </div>
    </div>
    <!-- 全球榜单 -->
    <div class="global">
      <div class="global-top">全球榜</div>
      <div class="global-list">
        <div class="music-list">
          <div class="item" v-for="(item,index) in globalList" :key="index">
            <img :src="item.coverImgUrl" alt="">
            <div class="list-data">{{item.name}}</div>
            <div class="play"><i class="el-icon-video-play"></i></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getquan
  } from "../../network/phang"

  import PhCard from "../../components/PhCard"
  export default {
    name: "Phang",
    data() {
      return {
        globalList: [],
        biaoshengData: {},
        biaoshengData1:{},
        biaoshengData2:{}
      }
    },
    components: {
      PhCard
    },
    created() {
      this.getquan1()
    },
    methods: {
      getquan1() {
        getquan("/toplist").then(res => {

          this.globalList = res.list
          this.biaoshengData = res.list[0]
          // console.log(res.list[0]);
           this.biaoshengData1 = res.list[1]
          //  console.log(res.list[1]);
            this.biaoshengData2 = res.list[2]
            //  console.log(res.list[2]);
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .phang {

    //官方榜的样式
    .official {
      .con{
        display: flex;
        justify-content: space-around;
      }
      .official-top {
        font-size: 20px;
        padding: 10px 0;
        border-bottom: 1px solid #aaa;
      }
    }

    //全球排行的样式
    .global {
      .global-top {
        font-size: 20px;
        padding: 10px 0;
        border-bottom: 1px solid #aaa;
      }



      .global-list {
        .music-list {
          display: flex;
          flex-wrap: wrap;
          padding: 20px 56px;

          .item {
            position: relative;
            // display: flex;
            width: 200px;
            height: 250px;
            overflow: hidden;
            margin-right: 18px;
            margin-bottom: 10px;
            cursor: pointer;

            img {
              width: 100%;
              height: 200px;

            }

            .play {
              position: absolute;
              top: 130px;
              right: 10px;
              transform: translateX(55px);
              transition: transform .3s;
              color: red;
              font-size: 45px;
            }
          }

          .item:hover .play {
            transform: translateX(0px);
          }

        }


      }
    }




  }
</style>